<template>
  <div>
   <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-select v-model="ruleForm.sex" placeholder="请选择性别">
            <el-option label="男" value="man"></el-option>
            <el-option label="女" value="woman"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日">
          <el-col :span="11">
            <el-form-item>
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.data" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="头像" >
            <img style="width:50px" :src="ruleForm.headIocn" alt="">
        </el-form-item>
        <el-upload
            class="upload-demo"
            drag
            ref="upload"
            action="/api/upload"
            name="files"
            accept=".png, .jpg"
            :before-upload="BeforeUpload"
            :on-success="loadSuc"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将你的头像拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确认更改</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { LoginPage, UpdateUser } from '_api'
export default {
  data  () {
    return {
      ruleForm: {
        useNname: '',
        sex: '男',
        data: '',
        headIocn: ''
      }
    }
  },
  methods: {
    // 更改信息成功
    submitForm () {
      UpdateUser().then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '修改个人信息成功',
            duration: 1000,
            onClose: () => {
              this.$router.go(0)
            }
          })
        }
      })
    },
    // 上传图片之前
    BeforeUpload (files) {
      if (files.size > (500 * 1024)) {
        this.$message({
          type: 'warning',
          message: '上传图片大小不能超过500kb'
        })
        return false
      } else {
        return true
      }
    },
    // 上传图片成功
    loadSuc (res) {
      if (res.code === 200) {
        this.ruleForm.headIocn = res.data.url
        this.$message({
          type: 'success',
          message: '文件上传成功'
        })
      }
    },

    fetchMes () {
      LoginPage().then((res) => {
        if (res.data.code === 200) {
          this.ruleForm = res.data.data.user
        }
      })
    }
  },
  created () {
    this.fetchMes()
  }
}
</script>

<style lang="scss" scoped>

</style>
